<template>
  <div class="loginBac">
    <!-- 背景 -->
    <img src="./images/1.png" alt="" />
    <!-- 登录窗口 -->
    <div class="login">
      <el-card class="box-card" shadow="hover">
        <!-- 头部 -->
        <div class="loginTop">
          <!-- 图标 -->
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-shuji"></use>
          </svg>
          <p>大众图书</p>
          <!-- 欢迎 -->
          <div class="TopFooter">
            <span></span>
            <span>{{
              flag == "0" ? "登录" : flag == "1" ? "忘记密码" : "注册管理员"
            }}</span>
            <span></span>
          </div>
        </div>
        <!-- 登录部分 -->
        <div class="loginCenter" v-if="flag == 0">
          <el-input
            placeholder="管理员"
            type="text"
            class="userIpt"
            size="large"
            v-model="account"
            autofocus
          ></el-input>
          <!-- 密码 -->
          <el-input
            placeholder="密码"
            type="password"
            size="large"
            class="pswIpt"
            v-model="password"
            :show-password="true"
            @keydown.enter="userLogin"
          ></el-input>
          <!-- 忘记密码与注册 -->
          <div class="pswreg">
            <span
              style="cursor: pointer"
              @click="
                flag = 1;
                account = '';
                password = '';
              "
              >忘记密码？</span
            >
            <span style="cursor: pointer" @click="flag = 2">注册</span>
          </div>
          <el-button
            size="large"
            class="subIpt"
            type="warning"
            @click="userLogin"
            >登 录</el-button
          >
        </div>
        <!-- 忘记密码 -->
        <div class="forgetPsw" v-else-if="flag == 1">
          <el-input
            @focus="accountColor = false"
            placeholder="管理员"
            type="text"
            :class="{ userIpt: true, iptcolor: accountColor }"
            size="large"
            v-model="account"
          ></el-input>
          <el-input
            placeholder="新密码"
            type="password"
            size="large"
            class="pswIpt"
            v-model="password"
            :show-password="true"
          ></el-input>
          <el-input
            placeholder="确认密码"
            type="password"
            size="large"
            @blur="isSame"
            :class="{ pswIpt: true, iptcolor: passwordColor }"
            v-model="password2"
            :show-password="true"
          ></el-input>
          <div class="btn">
            <el-button
              type="info"
              size="large"
              @click="
                flag = 0;
                account = '';
                password = '';
                password2 = '';
                passwordColor = false;
                accountColor = false;
              "
              >取消</el-button
            >
            <el-button type="primary" size="large" @click="confirmPsw"
              >确认</el-button
            >
          </div>
        </div>
        <!-- 注册 -->
        <div class="enrollAdmin" v-else-if="flag == 2">
          <el-input
            placeholder="新管理员"
            type="text"
            class="userIpt"
            size="large"
            v-model="account"
          ></el-input>
          <el-input
            placeholder="新密码"
            type="password"
            size="large"
            class="pswIpt"
            v-model="password"
            :show-password="true"
          ></el-input>
          <el-input
            placeholder="确认密码"
            type="password"
            size="large"
            @blur="isSame"
            :class="{ pswIpt: true, iptcolor: passwordColor }"
            v-model="password2"
            :show-password="true"
          ></el-input>
          <div class="btn">
            <el-button
              type="info"
              size="large"
              @click="
                flag = 0;
                account = '';
                password = '';
                password2 = '';
                passwordColor = false;
              "
              >取消</el-button
            >
            <el-button type="primary" size="large" @click="confirmEnroll"
              >确认</el-button
            >
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import { reactive, toRefs, computed } from "vue";
//引入vuex
import { useStore } from "vuex";
//引入router
import { useRouter } from "vue-router";
//消息提示
import { ElMessage } from "element-plus";

export default {
  setup(props) {
    /* 数据 */
    let data = reactive({
      account: "",
      password: "",
      password2: "",
      passwordColor: false, //密码不匹配显红框
      accountColor: false,
      flag: 0,
    });

    //vuex
    let { state, dispatch } = useStore();

    //路由
    let router = useRouter();

    // 方法 发送请求 登录
    async function userLogin() {
      //必须输入
      if (data.account != "" && data.password != "") {
        //通知vuex 发请求
        let result = await dispatch("Login", {
          account: data.account,
          password: data.password,
        });

        //获取token
        let token = computed(() => state.token);
        //获取id
        let id = computed(() => state.id);
        //如果状态为1则登录成功 存储token到sessionStorage  路由跳转
        if (result == "success") {
          //存储token到sessionS
          sessionStorage.setItem("TOKEN", JSON.stringify(token.value));
          sessionStorage.setItem("ID", JSON.stringify(id.value));
          //登录成功提示
          ElMessage({
            message: "登录成功",
            type: "success",
          });
          //路由跳转
          router.push("/");
        } else {
          //登录失败提示
          ElMessage({
            message: "用户名或密码错误",
            type: "error",
          });
          //清空表单
          data.account = "";
          data.password = "";
        }
      } else {
        ElMessage({
          type: "info",
          message: "输入不能为空",
        });
      }
    }

    //方法 忘记密码
    async function confirmPsw() {
      if (data.account && data.password && data.password2) {
        if (data.password == data.password2) {
          data.passwordColor = false;
          let result = await dispatch("ForgetPswOrEnrollAdmin", {
            account: data.account,
            password: data.password,
            flag: "forget",
          });
          if (result.status == "success") {
            data.account = "";
            data.password = "";
            data.password2 = "";
            ElMessage({
              type: "success",
              message: result.message,
            });
            data.flag = 0;
          } else {
            data.accountColor = true;
            ElMessage({
              type: "error",
              message: result.message,
            });
          }
        } else {
          data.passwordColor = true;
          ElMessage({
            type: "error",
            message: "密码不匹配",
          });
        }
      } else {
        ElMessage({
          type: "info",
          message: "输入不能为空",
        });
      }
    }

    //方法 注册
    async function confirmEnroll() {
      if (data.account && data.password && data.password2) {
        if (data.password == data.password2) {
          data.passwordColor = false;
          let result = await dispatch("ForgetPswOrEnrollAdmin", {
            account: data.account,
            password: data.password,
            flag: "enroll",
          });
          if (result.status == "success") {
            data.account = "";
            data.password = "";
            data.password2 = "";
            ElMessage({
              type: "success",
              message: result.message,
            });
            data.flag = 0;
          } else {
            ElMessage({
              type: "error",
              message: result.message,
            });
          }
        } else {
          data.passwordColor = true;
          ElMessage({
            type: "error",
            message: "密码不匹配",
          });
        }
      } else {
        ElMessage({
          type: "info",
          message: "输入不能为空",
        });
      }
    }

    //失去焦点判断密码是否匹配
    function isSame() {
      if (data.password == data.password2) {
        data.passwordColor = false;
      } else {
        data.passwordColor = true;
      }
    }

    return {
      ...toRefs(data),
      userLogin,
      confirmPsw,
      confirmEnroll,
      isSame,
    };
  },
};
</script>

<style lang="less" scoped>
.loginBac {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow-y: hidden; //隐藏滚动条
  img {
    width: 100%;
    height: 100%;
    filter: blur(5px);
  }
  .login {
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    width: 400px;
    height: 550px;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    .box-card {
      width: 100%;
      height: 100%;
      background-color: rgba(204, 202, 202, 0.6);
      border: 0;
      border-radius: 30px;
      .loginTop {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        .icon {
          width: 80px;
          height: 60px;
        }
        p {
          font-weight: 700;
          font-size: 20px;
        }
        .TopFooter {
          display: flex;
          justify-content: space-around;
          align-items: center;
          margin-top: 30px;
          :nth-child(1),
          :nth-child(3) {
            width: 120px;
            height: 1px;
            background-color: #ccc;
          }
          :nth-child(2) {
            margin: 0 10px;
            font-size: 18px;
          }
        }
      }
      .loginCenter {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 40px;
        .pswreg {
          width: 80%;
          margin-bottom: 10px;
          font-size: 12px;
          :nth-child(1) {
            float: left;
          }
          :nth-child(2) {
            float: right;
          }
        }
        .userIpt {
          width: 80%;
          margin-bottom: 10px;
        }
        .pswIpt {
          width: 80%;
          margin-bottom: 10px;
        }
        .subIpt {
          width: 80%;
          border: 0;
          // background-color: rgba(169, 169, 227, 0.6);
          font-size: 20px;
        }
      }
      .forgetPsw {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 40px;
        .userIpt {
          width: 80%;
          margin-bottom: 10px;
        }
        .pswIpt {
          width: 80%;
          margin-bottom: 10px;
        }
        .btn {
          padding-top: 20px;
        }
      }
      .enrollAdmin {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 40px;
        .userIpt {
          width: 80%;
          margin-bottom: 10px;
        }
        .pswIpt {
          width: 80%;
          margin-bottom: 10px;
        }
        .btn {
          padding-top: 20px;
        }
      }
    }
  }
}
.iptcolor {
  /* 修改输入框颜色 */
  --el-input-border-color: red;
}
</style>